<template>
  <!-- 编辑频道弹出层 -->
  <van-popup
    v-model="isShowChannelEditPopup"
    closeable
    position="left"
    :style="{ width: '100%', height: '100%' }"
  >
    <div class="channel-edit-container">
      <div class="my-channel">
        <div class="header">
          <div class="title">
            <div class="main">我的频道：</div>
            <div class="desc">点击进入频道</div>
          </div>
          <div
            class="edit-btn"
            @click="
              $store.commit(
                'channel/changeIsEditStatus',
                !$store.state.channel.isEditStatus
              )
            "
          >
            {{ $store.state.channel.isEditStatus ? '完成' : '编辑' }}
          </div>
        </div>
        <div class="list">
          <div
            v-for="(v, i) of $store.state.channel.curUserChannels"
            :key="v.id"
            class="item"
            :class="{
              active: v.id === $store.state.channel.activeChannelId,
              close: i !== 0 && $store.state.channel.isEditStatus,
            }"
            @click="onClickItemOfMyChannel(v, i)"
          >
            {{ v.name }}
          </div>
        </div>
      </div>
      <div class="recommend-channel">
        <div class="header">
          <div class="title">
            <div class="main">推荐频道：</div>
          </div>
        </div>
        <div class="list">
          <div
            v-for="v of $store.getters['channel/recommendChannels']"
            :key="v.id"
            class="item"
            @click="onClickItemOfRecommendChannel(v)"
          >
            {{ v.name }}
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  name: 'ChannelEditPopup',
  computed: {
    isShowChannelEditPopup: {
      get() {
        return this.$store.state.channel.isShowChannelEditPopup
      },
      set(newValue) {
        this.$store.commit('channel/changeIsShowChannelEditPopup', newValue)
      },
    },
  },
  methods: {
    // 点击推荐频道列表项
    onClickItemOfRecommendChannel(channel) {
      // 如果登录了
      if (this.$store.getters['user/isLogin']) {
        // 发送添加用户频道请求
        this._apis.channel
          .addUserChannel({
            id: channel.id,
            seq: this.$store.state.channel.curUserChannels.length,
          })
          .then(() => {
            // 请求成功，就调用 mutation 追加到 Vuex 的 state 中
            this.$store.commit('channel/addChannelOfCurUserChannels', channel)
          })
      }
      // 如果没登录
      else {
        // 弹层提示是否现在去登录
        this.$dialog
          .confirm({
            title: '现在去登录吗？',
            message: '未登录不能编辑频道，请先登录后再来',
          })
          .then(() => {
            // 点击了确定，就跳转到登录页
            this.$router.push({ name: 'login' })
          })
      }
    },
    // 点击我的频道列表项
    onClickItemOfMyChannel(channel, i) {
      // 看是否为编辑状态
      // 如果是，则移到下面的推荐频道列表中
      if (this.$store.state.channel.isEditStatus) {
        // 如果删除的是第一个频道，那么直接中断函数向下执行
        if (i === 0) return

        if (!this.$store.getters['user/isLogin']) {
          // 弹层提示是否现在去登录
          this.$dialog
            .confirm({
              title: '现在去登录吗？',
              message: '未登录不能编辑频道，请先登录后再来',
            })
            .then(() => {
              // 点击了确定，就跳转到登录页
              this.$router.push({ name: 'login' })
            })
          return
        }

        // 要先发请求删
        this._apis.channel.delUserChannelById(channel.id).then(() => {
          // 请求成功后，再操作 Vuex 中数据

          // 如果删除的这个 id 是当前激活的 id
          if (channel.id === this.$store.state.channel.activeChannelId) {
            // 那么就让激活的 id 改成我的频道中的第一个频道的 id
            this.$store.commit(
              'channel/changeActiveChannelId',
              this.$store.state.channel.curUserChannels[0].id
            )
          }

          // 调用 mutation 更新 Vuex 中的 state
          this.$store.commit('channel/delCurUserChannelById', channel.id)
        })
      }
      // 如果不是，则切换频道
      else {
        // 如果点击的不是当前激活的id，再切换
        if (channel.id !== this.$store.state.channel.activeChannelId) {
          this.$store.commit('channel/changeActiveChannelId', channel.id)
          this.$store.commit('channel/closeChannelEditPopup')
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
.channel-edit-container {
  padding-top: 100px;
  .my-channel,
  .recommend-channel {
    .header {
      padding: 0 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        display: flex;
        align-items: center;
        .main {
          font-size: 36px;
        }
        .desc {
          font-size: 24px;
          color: #b7a9a9;
        }
      }
      .edit-btn {
        border: 1px solid #fc8b5c;
        border-radius: 62px;
        padding: 5px 40px;
        color: #fc8b5c;
        font-size: 26px;
        cursor: pointer;
      }
    }
    .list {
      padding-top: 20px;
      display: flex;
      flex-wrap: wrap;
      .item {
        position: relative;
        background-color: #f7f8fa;
        font-size: 30px;
        padding: 20px;
        border-radius: 50px;
        margin: 20px 0 0 20px;
        // &代表上级选择器
        &.active {
          color: #fc8b5c;
        }
      }
    }
  }
  .my-channel {
    .list {
      .item {
        &.close::after {
          position: absolute;
          top: -10px;
          right: -10px;
          content: '+';
          display: block;
          background-color: #bfc2cb;
          width: 30px;
          height: 30px;
          line-height: 30px;
          font-size: 40px;
          border-radius: 50%;
          text-align: center;
          color: #fff;
          padding: 2px;
          transform: rotate(45deg);
        }
      }
    }
  }
  .recommend-channel {
    margin-top: 60px;
  }
}
</style>
